import { Card } from 'antd';
import BasicTable from './components/BasicTable'
import OptionalTable from './components/OptionalTable'
import SortTable from './components/SortTable'

const BasicTables = () => {
  return (
    <div>
      <Card title="基本用法&自定义单元格省略提示" headStyle={{backgroundColor: '#fafafa'}}>
        <div>简单的表格，最后一列是各种操作。</div>
        <div>设置 column.ellipsis.showTitle 关闭单元格内容自动省略后默认的 title 提示, 使用 Tooltip 替代。</div>
        <br/>
        <BasicTable />
      </Card>
      <Card title="可选择" headStyle={{backgroundColor: '#fafafa'}} style={{marginTop: '16px'}}>
        <div>第一列是联动的选择框。可以通过 rowSelection.type 属性指定选择类型，默认为 checkbox。</div>
        <br/>
        <OptionalTable />
      </Card>
      <Card title="筛选和排序" headStyle={{backgroundColor: '#fafafa'}} style={{marginTop: '16px'}}>
        <div>对某一列数据进行筛选，使用列的 filters 属性来指定需要筛选菜单的列，onFilter 用于筛选当前数据，filterMultiple 用于指定多选和单选。

        对某一列数据进行排序，通过指定列的 sorter 函数即可启动排序按钮。sorter: function(rowA, rowB) {`{ ... }`}， rowA、rowB 为比较的两个行数据。

        sortDirections: ['ascend' | 'descend']改变每列可用的排序方式，切换排序时按数组内容依次切换，设置在 table props 上时对所有列生效。你可以通过设置 ['ascend', 'descend', 'ascend'] 禁止排序恢复到默认状态。

        使用 defaultSortOrder 属性，设置列的默认排序顺序。</div>
        <br/>
        <SortTable />
      </Card>
    </div>
  )
}
export default BasicTables;
